<template>
	<view class="classlist">
		<view class="loadingMore">
			<uni-load-more status="loading" v-if="!classList.length"></uni-load-more>

		</view>
		<view class="content">
			<view class="item" v-for="(item,index) in classList" :key="item._id" @click="goProview(item._id)">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</view>
		</view>
		
		<view class="loadingMore" v-if="classList.length">
			
			<uni-load-more :status="onData?'noMore':'loading'"></uni-load-more>
		
		</view>
		
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
import {onLoad,onReachBottom} from "@dcloudio/uni-app";
import { ref } from "vue";
import { apiGetClassList } from "../../api/apis";
	
	const classList = ref([]);
	const classInfo = {
		pageSize:12,
		pageNum:1
	};
	
	const onData = ref(false);
	
	
	
	onLoad((e)=>{
		
		let {id,name} = e;
		classInfo.classid = id ;
		uni.setNavigationBarTitle({
			title:name
		})
		
        getClassList();
		
	})
	
	onReachBottom(()=>{
		if(onData.value) return;
		classInfo.pageNum++;
		getClassList();
	})
	
	const getClassList =  async () =>{
		let res = await apiGetClassList(classInfo);
		classList.value =[...classList.value,...res.data];
		console.log(classList.value)
		if(classInfo.pageNum > res.data.length) onData.value = true;
		//修改大图存进去
		classList.value =classList.value.map(item=>{
	
			return {
				...item,
				picurl:item.smallPicurl.replace("_small.webp",".jpg")
			}
		});
			
		
		uni.setStorageSync('storClassList',classList.value);//存入缓存
	}
	
	function goProview(id){

		uni.navigateTo({
			url:"/pages/preview/preview?id="+id,
		})
	}
	
</script>

<style lang='scss' scoped>
	    .classlist{
			.content{
					display: grid;
					grid-template-columns: repeat(3,1fr);
					gap:5rpx;
					padding: 15rpx;
					.item{
						height:380rpx;
						image{
							width:100%;
							height:100%;
						}
					}
			}
		}
</style>
